<template>
	<s-layout title="账号设置" navbar="normal" >
		<view class="content">
			<view class="cardBox">
				<view class="cardBox-item" hover-class="ss-hover-btn" @tap="sheep.$router.go('/pages/user/userInfo')">
					<view class="cardBox-item-title">个人资料</view>
					<view class="cardBox-item-right">
						<image class="cardBox-item-icon" src="@/icon/hs_right.png" />
					</view>
				</view>
				<view class="cardBox-item" hover-class="ss-hover-btn" @tap="sheep.$router.go('/pages/user/account')">
					<view class="cardBox-item-title">账号密码</view>
					<view class="cardBox-item-right">
						<image class="cardBox-item-icon" src="@/icon/hs_right.png" />
					</view>
				</view>
			</view>
			<view class="cardBox">
				<view class="cardBox-item" hover-class="ss-hover-btn" @tap="sheep.$router.go('/pages/user/address/list')">
					<view class="cardBox-item-title">地址管理</view>
					<view class="cardBox-item-right">
						<image class="cardBox-item-icon" src="@/icon/hs_right.png" />
					</view>
				</view>
				<view class="cardBox-item" hover-class="ss-hover-btn" @tap="sheep.$router.go('/pages/user/invoice/list')">
					<view class="cardBox-item-title">发票管理</view>
					<view class="cardBox-item-right">
						<image class="cardBox-item-icon" src="@/icon/hs_right.png" />
					</view>
				</view>
			</view>
			<view class="titleLine">
				系统设置
			</view>
			<view class="cardBox">
				<view class="cardBox-item">
					<view class="cardBox-item-title">当前版本</view>
					<view class="cardBox-item-right">
						<view class="cardBox-item-tips">
							{{appInfo.version}}
						</view>
					</view>
				</view>
				<view class="cardBox-item">
					<view class="cardBox-item-title">本地缓存</view>
					<view class="cardBox-item-right">
						<view class="cardBox-item-tips">
							{{storageSize}}
						</view>
					</view>
				</view>
				<view class="cardBox-item" hover-class="ss-hover-btn" @tap="sheep.$router.go('/pages/public/feedback')">
					<view class="cardBox-item-title">意见反馈</view>
					<view class="cardBox-item-right">
						<image class="cardBox-item-icon" src="@/icon/hs_right.png" />
					</view>
				</view>
				<view class="cardBox-item" hover-class="ss-hover-btn" @tap="
					sheep.$router.go('/pages/public/richtext', {
					  id: appInfo.about_us.id,
					  title: appInfo.about_us.title,
					})
				  ">
					<view class="cardBox-item-title">关于我们</view>
					<view class="cardBox-item-right">
						<image class="cardBox-item-icon" src="@/icon/hs_right.png" />
					</view>
				</view>
			</view>
			<template v-if="sheep.$platform.name !== 'H5' &&isLogin">
				<view class="titleLine">
					第三方账号绑定
				</view>
				<view class="cardBox" >
					<view class="cardBox-item" >
						<view class="cardBox-item-title" v-if="'WechatOfficialAccount' === sheep.$platform.name">
							<image class="platform-icon" :src="sheep.$url.static('/static/img/shop/platform/WechatOfficialAccount.png')"/>
							微信公众号
						</view>
						<view class="cardBox-item-title" v-if="'WechatMiniProgram' === sheep.$platform.name">
							<image class="platform-icon" :src="sheep.$url.static('/static/img/shop/platform/WechatMiniProgram.png')"/>
							微信小程序
						</view>
						<view class="cardBox-item-title" v-if="'App' === sheep.$platform.name">
							<image class="platform-icon" :src="sheep.$url.static('/static/img/shop/platform/wechat.png')"/>
							微信开放平台
						</view>
						<view class="cardBox-item-right">
							<view class="info ss-flex ss-col-center" v-if="state.thirdOauthInfo">
							  <image class="avatar ss-m-r-20" :src="sheep.$url.cdn(state.thirdOauthInfo.avatar)"/>
							  <text class="name">{{ state.thirdOauthInfo.nickname }}</text>
							</view>
							<view class="bind-box ss-m-l-20">
							  <button
							    v-if="state.thirdOauthInfo"
							    class="ss-reset-button relieve-btn"
							    @tap="unBindThirdOauth"
							  >
							    解绑
							  </button>
							  <button v-else class="ss-reset-button bind-btn" @tap="bindThirdOauth">绑定</button>
							</view>
						</view>
					</view>
				</view>
			</template>
			<view class="set-footer ss-flex-col ss-row-center ss-col-center">
				<view class="agreement-box ss-flex ss-col-center ss-m-b-40">
					<view class="ss-flex ss-col-center ss-m-b-10">
						<view class="tcp-text" @tap="sheep.$router.go('/pages/public/richtext', {
							id: appInfo.user_protocol.id,
							title: appInfo.user_protocol.title,
						})" >
							《{{ appInfo.user_protocol.title }}》
						</view>
						<view class="agreement-text">与</view>
						<view class="tcp-text" @tap=" sheep.$router.go('/pages/public/richtext', {
							id: appInfo.privacy_protocol.id,
							title: appInfo.privacy_protocol.title,
						})" >
							《{{ appInfo.privacy_protocol.title }}》
						</view>
					</view>
				</view>
				<view class="copyright-text ss-m-b-10">{{ appInfo.copyright }}</view>
				<view class="copyright-text">{{ appInfo.copytime }}</view>
			</view>
			<su-fixed bottom placeholder>
			  <view class="ss-p-x-20 ss-p-b-40">
			    <button
			      class="loginout-btn ss-reset-button ui-BG-Main ui-Shadow-Main"
			      @tap="onLogout"
			      v-if="isLogin"
			    >
			      退出登录
			    </button>
			  </view>
			</su-fixed>
		</view>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import { onLoad, onShow, onHide} from '@dcloudio/uni-app';
	import {ref, reactive,watch, computed ,onBeforeMount } from 'vue'
	
	const appInfo = computed(() => sheep.$store('app').info);
	const isLogin = computed(() => sheep.$store('user').isLogin);
	const userInfo = computed(() => sheep.$store('user').userInfo);
	const storageSize = uni.getStorageInfoSync().currentSize + 'Kb';
	
	const state = reactive({
		data:{},
		list:[],
	})
	watch(()=>isLogin.value,(newVal)=>{
		if(newVal){
			getThirdOauthInfo();
		}
	})
	onLoad((opt)=>{

	})
	onBeforeMount(async () => {
		if(isLogin.value){
			getThirdOauthInfo();
		}
	});
	// 绑定第三方账号
	async function bindThirdOauth() {
	  let result = await sheep.$platform.useProvider('wechat').bind();
	  if (result) {
	    getThirdOauthInfo();
	  }
	}
	
	// 解绑第三方账号
	function unBindThirdOauth() {
	  uni.showModal({
	    title: '解绑提醒',
	    content: '解绑后您将无法通过微信登录此账号',
	    cancelText: '再想想',
	    confirmText: '确定',
	    success: async function (res) {
	      if (res.confirm) {
	        const result = await sheep.$platform.useProvider('wechat').unbind();
	        if (result) {
	          getThirdOauthInfo();
	        }
	      }
	    },
	  });
	}
	function onClick(){
		sheep.$router.go('/pages/index/index')
	}
	const getThirdOauthInfo = async () => {
	  if (sheep.$platform.name !== 'H5') {
	    let { data, error } = await sheep.$api.user.thirdOauthInfo();
	    if (error === 0) {
	      state.thirdOauthInfo = data;
	    }
	  }
	};
	function onLogout() {
	  uni.showModal({
	    title: '提示',
	    content: '确认退出账号？',
	    success: async function (res) {
	      if (res.confirm) {
	        const result = await sheep.$store('user').logout();
	        if (result) {
	          sheep.$router.go('/pages/index/user');
	        }
	      }
	    },
	  });
	}
	
</script>

<style lang="scss" scoped>
	.content{
		.titleLine{
			margin: 30rpx 34rpx;
			font-family: Source Han Sans;
			font-size: 28rpx;
			font-weight: 500;
			line-height: 1;
			color: #565656;
		}
		.cardBox{
			width: 690rpx;
			margin: 30rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			.cardBox-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 40rpx 0 20rpx;
				height: 85rpx;
				border-bottom: 1rpx solid #F5F5F5;
				&:last-child{
					border-bottom: none;
				}
				.cardBox-item-title{
					display: flex;
					align-items: center;
					font-family: Source Han Sans;
					font-size: 30rpx;
					font-weight: 500;
					line-height: normal;
					text-align: center;
					letter-spacing: normal;
					color: #1F1F1F;
					.platform-icon{
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}
				}
				.cardBox-item-right{
					display: flex;
					align-items: center;
					.cardBox-item-text{
						font-family: Source Han Sans;
						font-size: 28rpx;
						font-weight: normal;
						line-height: normal;
						letter-spacing: normal;
						color: #9E9E9E;
					}
					.cardBox-item-tips{
						font-family: Source Han Sans;
						font-size: 28rpx;
						font-weight: normal;
						line-height: normal;
						letter-spacing: normal;
						color: #9E9E9E;
					}
					.cardBox-item-img{
						width: 67rpx;
						height: 67rpx;
						border-radius: 50%;
					}
					.cardBox-item-icon{
						width: 9rpx;
						height: 25rpx;
						margin-left: 20rpx;
					}
				}
			}
		}
		.info {
		  .avatar {
		    width: 38rpx;
		    height: 38rpx;
		    border-radius: 50%;
		    overflow: hidden;
		  }
		
		  .name {
		    font-size: 28rpx;
		    font-weight: 400;
		    color: $dark-9;
		  }
		}
		.bind-box {
		  width: 100rpx;
		  height: 50rpx;
		  line-height: normal;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  font-size: 24rpx;
		
		  .bind-btn {
		    width: 100%;
		    height: 100%;
		    border-radius: 25rpx;
		    background: #f4f4f4;
		    color: #999999;
		  }
		  .relieve-btn {
		    width: 100%;
		    height: 100%;
		    border-radius: 25rpx;
		    background: var(--ui-BG-Main-opacity-1);
		    color: var(--ui-BG-Main);
		  }
		}
		.loginout-btn {
		  width: 100%;
		  height: 80rpx;
		  border-radius: 40rpx;
		  font-size: 30rpx;
		}
		.set-footer {
		  margin: 100rpx 0 0 0;
		
		  .copyright-text {
		    font-size: 22rpx;
		    font-weight: 500;
		    color: $gray-c;
		    line-height: 30rpx;
		  }
		
		  .agreement-box {
		    font-size: 26rpx;
		    font-weight: 500;
		
		    .tcp-text {
		      color: var(--ui-BG-Main);
		    }
		
		    .agreement-text {
		      color: $dark-9;
		    }
		  }
		}
	}
</style>